<!DOCTYPE html>
<link rel="stylesheet" href="/stylesheet.css">
<title>&lt;/&gt; htmx Realtime Test Server</title>
<script src="/htmx/htmx.js"></script>
<script src="/htmx/ext/sse.js"></script>
<script src="/htmx/ext/ws.js"></script>

<div id="header"></div>
<div id="navigation">
  <a href="/">Introduction</a>

  <div class="group">
    <a href="/ws-about-ext.html">WebSockets</a>
    <a href="/ws-echo-ext.html">Echo</a>
    <a href="/ws-heartbeat-ext.html">Heartbeat</a>
  </div>

  <div class="group">
    <a href="/sse-about-ext.html">Server Sent Events</a>
    <a href="/sse-simple-ext.html">Simple</a>
    <a href="/sse-multiple-ext.html">Multiple</a>
    <a href="/sse-multichannel-ext.html">Multi-Channel</a>
    <a href="/sse-triggers-ext.html">Event Trigger</a>
    <a href="/sse-target-ext.html">Event Target</a>
    <a href="/sse-settle-ext.html">Settling</a>
  </div>
</div>

<script>
  // This is a tiny hack because I'm simply prepending this file to every page
  // Obviously you could do this with a template engine instead but I'm not using a template engine
  const navlinks = document.querySelectorAll('#navigation a')
  navlinks.forEach(link => {
    const locWithoutExt = window.location.toString().replace('-ext', '')
    if (link.href === locWithoutExt) link.classList.add('selected')
  })
</script>
